<template>
  <!-- 用户管理 -->
  <div>
    <el-row class="topRow">
      <el-button type="primary" @click="addUser">添加</el-button>
      <!-- <el-button type="success" @click="batchDel">批量删除</el-button> -->
    </el-row>
    <el-table
      ref="multipleTable"
      :data="userData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <!-- 复选接钮 -->
      <el-table-column label="编号" prop="id" width="55" align="center"></el-table-column>
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="zba" label="单位零余额账户" width="200" align="center"></el-table-column>
      <el-table-column prop="company" label="预算单位" width="200" align="center"></el-table-column>
      <el-table-column prop="management_office" label="单位主管处室" width="200" align="center"></el-table-column>
      <el-table-column prop="management_organization" label="预算单位支出管理机构" width="200" align="center"></el-table-column>
      <el-table-column prop="expand_project" label="支出项目" show-overflow-tooltip align="center"></el-table-column>
      <!-- <el-table-column label="操作" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="编号">
          <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="用户">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: { id: "", username: "", createTime: "" },
      userData: [
        { id: 1, company: "学校1", zba:"123456", management_office:"预算处", expand_project: "2019-08-13 15:00:00" },
        { id: 2, company: "学校2", zba:"123456", management_office:"预算处", expand_project: "2019-08-13 15:00:00" },
        { id: 3, company: "学校3", zba:"123456", management_office:"预算处", expand_project: "2019-08-13 15:00:00" }
      ],
      multipleSelection: [],
      title: "",
      dialogVisible: false
    };
  },
  methods: {
    // 选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose() {
    this.dialogVisible = false;
   },
   handleDelete(index, rows) {
      this.userData.splice(index, 1);
    },
    //批量删除
    // batchDel() {
    //   this.multipleSelection.forEach(element => {
    //     this.userData.forEach((item, index) => {
    //       if (item.username == element.username) {
    //         this.userData.splice(index, 1);
    //       }
    //     });
    //   });
    // },
    addUser() {
      this.form.id = "";
      this.form.username = "";
      this.title = "添加用户";
      this.dialogVisible = true;
    },
    // 编辑
    // handleEdit(index, rows) {
    //   this.title = "编辑用户";
    //   this.dialogVisible = true;
    //   this.form.id = rows.id;
    //   this.form.username = rows.username;
    //   console.log(index + "->" + rows.username);
    // },
    save() {
      if (this.title == "添加用户") {
         let user = { id: "", username: "", createTime: "" };
        user.id = this.form.id;
        user.username = this.form.username;
        user.createTime= "2019-08-14 10:00:00";
        this.userData.push(user);
        this.dialogVisible = false;
      } else if (this.title == "编辑用户") {
         this.userData.forEach((item,index)=>{
           if(item.username==this.form.username){
             item.username=this.form.username;
              this.dialogVisible = false;
              return;
           }
         });
      }
    },
  }
};
</script>
<style scoped>
.topRow {
  margin: 10px 20px 0;
  margin-bottom: 10px;
  float: left;
}
</style>